<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%--头部导航开始--%>
<jsp:include page="head.jsp"/>
<%--头部导航结束--%>
<!--中间内容-->
<div class="layui-container fly-marginTop fly-user-main">

    <jsp:include page="manger_left.jsp"/>


    <div class="fly-panel fly-panel-user" pad20>

        <div class="fly-panel fly-panel-user" pad20>

            <div class="layui-tab layui-tab-brief" lay-filter="user">
                <ul class="layui-tab-title" id="LAY_mine">
                    <li data-type="mine-jie" lay-id="index" class="layui-this">博客分类管理</li>
                </ul>
                <div class="layui-tab-content" style="padding: 20px 0;">

                    <div style="height: 10px;">
                    </div>
                    <div class="demoTable">
                        <div class="layui-inline">
                            <input class="layui-input" name="id" placeholder="用户名/昵称/邮箱/注册类型" id="demoReload" onfocus="this.placeholder=''" onblur="this.placeholder='用户名/昵称/邮箱/注册类型'" autocomplete="off">
                        </div>
                        <button class="layui-btn" data-type="reload" id="search">搜索</button>
                    </div>
                    <%--表格--%>
                    <table class="layui-hide" id="btypetable" lay-filter="btypetable"></table>

                    <%--表格操作--%>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    </script>
                    <script type="text/html" id="switchTpl">
                        <input type="checkbox" name="sex" value="{{d.tId}}" lay-skin="switch" lay-text="禁用|启用" lay-filter="sexDemo" {{ d.tState == 1 ? 'checked' : '' }}>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<%--这里是弹出层的表单信息 表单的id用于表单的选择，style是在本页隐藏，只有点击添加才会弹出--%>
<div class="layui-row" id="popUpdateTest" style="display:none;">

    <div class="layui-form layui-form-pane" style="padding: 10px;">
        <center>
            <form:form action="${pageContext.request.contextPath}/type/teacher/add.do" method="post">
                <div class="layui-form-item">
                </div>
                <div class="layui-form-item">
                    <label for="tName" class="layui-form-label">类型</label>
                    <div class="layui-input-inline">
                        <input type="text" id="tName" name="tName" required lay-verify="required" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button type="submit" class="layui-btn" lay-submit>立即添加</button>
                </div>
            </form:form>
        </center>
    </div>
    <div id="LAY_page1"></div>
</div>

<!--底部开始-->
<jsp:include page="bottom.jsp"/>
<!-- 底部结束 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js" ></script>
<!-- 删除操作js开始 -->
<script>
    layui.use('table', function(){
        var table = layui.table,
            form = layui.form;

        table.render({
            elem: '#btypetable'
            ,url:'${pageContext.request.contextPath}/type/teacher/admin_list.do'
            ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            , id: 'btypetable'
            ,title: '博客分类管理表'
            ,cols: [[
                { fixed: 'left',type: 'checkbox' , width:'10%'}
                ,{field:'tId', title:'ID',type:"numbers", width:'10%', unresize: true, align:'center'}
                ,{field:'tName', title:'分类名称', width:'50%', sort: true, align:'center',edit:true}
                ,{field:'tState', title:'是否禁用', width:'10%', templet: '#switchTpl', unresize: true}
                ,{title:'操作', toolbar: '#barDemo', width:'20%', align:'center'}
            ]]
            ,page: true,
            text: {
                none: '暂无相关数据'
            }
        });
        //监听禁用操作
        form.on('switch(sexDemo)', function(obj){
            //发送禁用/启用请求
            if(obj.elem.checked){
                update_isUse(this.value,1);
            }else{
                update_isUse(this.value,0);
            }
        });
        //数据表格重载
        // 执行搜索，表格重载
        $('#search').on('click', function () {
            // 搜索条件
            var demoReload = $('#demoReload').val();
            table.reload('btypetable', {
                method: 'get'
                , where: {
                    'keywords': demoReload
                }
                , page: {
                    curr: 1
                }
            });
        });

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听头工具栏事件
        table.on('toolbar(btypetable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    //layer.msg('添加');
                    layer.open({
                        //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                        type: 1,
                        title: "添加分类信息",
                        area: ['400px', '200px'],
                        content: $("#popUpdateTest")//引用的弹出层的页面层的方式加载修改界面表单
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        //layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                        window.location.href="${pageContext.request.contextPath}/type/teacher/to_update.do?tId="+checkStatus.data[0].tId;
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                            var ids = [];//id
                            var tName = [];//name
                            for (var i = 0; i < data.length; i++) { //循环筛选出id
                                ids.push(data[i].tId);
                                tName.push(data[i].tName);
                            }
                            //发送删除请求
                            layer.confirm("确认要删除"+JSON.stringify(tName)+"吗，删除后不能恢复", { title: "删除确认" }, function(index){
                                sendden(ids);
                                return false;
                            });


                    }
                    break;
            };
        });
        //监听行工具事件
        table.on('tool(btypetable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    var ids = data.tId;
                    sendden(ids);//发送删除请求
                    return false;
                });
            }else if(obj.event === 'edit'){//点击编辑，跳转到编辑页面
                window.location.href="${pageContext.request.contextPath}/type/teacher/to_update.do?tId="+data.tId;
            }
        });

        //监听单元格编辑
        table.on('edit(btypetable)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            table_edit_update(data.tId,field,value);
        });


        /*发送删除请求*/
        function sendden(ids){
            $.ajax({
                url: "${pageContext.request.contextPath}/type/teacher/admin_delete.do",
                type: "post",
                dataType:'json',
                data: 'ids='+ids,
                success: function (result) {
                    if (result.msg == 200) {
                        layer.msg('删除成功');
                        table.reload('btypetable',{});
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        }
        function update_isUse(id,isUse){
            $.post('${pageContext.request.contextPath}/type/teacher/editState.do',{tId:id,tState:isUse},function(result){
                if(result.code==0){
                    layer.msg('修改成功');
                }else{
                    layer.msg('修改失败');
                }
            },'json');
        }

    });
    //编辑单元格发送请求
    function table_edit_update(tId,field,value){
        $.post('${pageContext.request.contextPath}/type/teacher/admin_update.do?'+field+'='+value,{tId:tId},function(result){
            if(result.code==0){
                layer.msg(result.msg);
            }else{
                layer.closeAll();
                layer.msg(result.msg);
            }
        },'json');

    }
</script>
